<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="applicable-device" content="mobile">
		<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no,minimal-ui" name="viewport">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta content="telephone=no" name="format-detection">
		<!-- UC默认竖屏` UC强制全屏 -->
		<meta name="full-screen" content="yes">
		<meta name="browsermode" content="application">
		<!-- QQ强制竖屏` QQ强制全屏 -->

		<link rel="stylesheet" href="/static/wap/lib/mui.min.css" />
		<link rel="stylesheet" href="/static/wap/lib/swiper.min.css" />

		<link rel="stylesheet" href="/static/wap/css/common.css" />
		<link rel="stylesheet" href="/static/wap/css/consult.css" />

		<link rel="stylesheet" href="/static/wap/css/reset.css" />

		<script type="text/javascript" src="/static/wap/lib/jquery-2.1.4.js"></script>
		<script type="text/javascript" src="/static/wap/lib/mui.min.js"></script>
		<script type="text/javascript" src="/static/wap/lib/swiper-3.4.2.min.js"></script>
		
		<script type="text/javascript" src="/static/index/lib/template.js"></script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a href="/wap/" class="mui-icon mui-icon-back" style="color: #fff;"></a>
			<h1 class="mui-title">奇快企服</h1>
		</header>

		<div class="nav_title" style="margin-top: 48px;">
			<span class="title_name">首页</span>
			<span class="mui-icon mui-icon-forward"></span>
			<span class="title_name">行业资讯</span>
		</div>

		<div class="swiper-container bannerSlide" id="inforHtml"></div>
		
		<script id="inforScript" type="text/html">
		  	<div class="swiper-wrapper">
		  		{{each hot_newsList item index}}  
				    <a class="swiper-slide" href="/wap/zx/{{item.id}}">
				    		<img src="{{item.poster}}" alt="" />
				    		<div class=" slideText">{{item.title}}</div>
				    </a>
			    {{/each}}  
		  	</div>
		  	<div class="swiper-pagination"></div>
		</script>
		
		<div id="inforTwoHtml"></div>
		<script id="inforTwoScript" type="text/html">
			<div class="hot_titleBox">热门咨询</div>
			<div class="border_box">
				{{each list item index}}  
					<a href="/wap/zx/{{item.id}}" class="title_style">{{item.title}}</a>
					<a href="/wap/zx/{{item.id}}" class="sub_title_style">{{item.desc}}</a>
				{{/each}}  
			</div>
		</script>
		
		<div id="inforThreeHtml"></div>
		<script id="inforThreeScript" type="text/html">
			<div class="hot_titleBox">热门专题</div>
			<a class="border_wrap clearfix" href="/wap/zx/{{list[0].id}}" style="display: block;">
				<img class="mui-pull-left comp_pic" src="{{list[0].poster}}"/>
				<div class="right_sec mui-pull-left">
					<div class="top_style">{{list[0].title}}</div>
					<div class="sub_top_style">{{list[0].desc}}</div>
					<div class="bottom_time">浏览数：{{list[0].view_num}}&nbsp;&nbsp;&nbsp;{{list[0].create_time}}</div>
				</div>
			</a>
		</script>
		
		<div id="inFooterHtml"></div>
		<script id="inFooterScript" type="text/html">
			<div class="hot_titleBox">
				<span class="mui-pull-left">{{name}}</span>
				<a href="/wap/zxlist/" class="mui-pull-right moreBtn_link">更多</a>
			</div>
			<div class="border_wrap clearfix" style="margin-bottom: 2rem;">
				<img class="mui-pull-left comp_pic" src="{{firstNews.poster}}"/>
				<div class="right_sec mui-pull-left">
					<a href="/wap/zx/{{firstNews.id}}" class="top_style" style="display: block;">{{firstNews.title}}</a>
					<a href="/wap/zx/{{firstNews.id}}" class="sub_top_style" style="display: block;">{{firstNews.desc}}</a>
					<div class="bottom_time">浏览数：1000&nbsp;&nbsp;&nbsp;{{firstNews.create_time}}</div>
				</div>
				<ul class="list_ul">
					{{each newsList item index}}  
						<li>
			  				<a href="/wap/zx/{{item.id}}">{{item.title}}</a>
			  			</li>
					{{/each}}  
					</li>
				</ul>
			</div>
		</script>
		
		{include file="pub/footer"}

		
		<script>
			
			var baseUrl = 'https://api.qikuai100.com/';
            $(function(){
                initDate();
            });
            // 加载资质分类数据
			function initDate(){
				$.ajax({
					type: "POST",
					url: baseUrl +"api/news/index", 
					success: function(result) {
						if(result.ret == 0) {
							var data = result.data;
					        var inforHtml = template('inforScript',data);
					        document.getElementById('inforHtml').innerHTML = inforHtml;
					        var mySwiper = new Swiper('.swiper-container', {
			                    autoplay: 3500,//可选选项，自动滑动
			                    loop: true,
			                    speed: 800,
			                    pagination : '.swiper-pagination'
			                });
			                
			                var dataOne = {
			                		name: '热点',
			                		list: []
			                };
			                for(var i = 0; i < 3; i++){
			                		dataOne.list.push(data.hot_newsList[i]);
			                }
			                var inforTwoHtml = template('inforTwoScript',dataOne);
					        document.getElementById('inforTwoHtml').innerHTML = inforTwoHtml;
					       	 
					        var inforThreeHtml = template('inforThreeScript',dataOne);
					        document.getElementById('inforThreeHtml').innerHTML = inforThreeHtml;
					        
					        var footerList = {
					        		name: data.footer_list.name,
					        		firstNews: data.footer_list.news_lists[0],
					        		newsList: []
					        };
					        for(var j = 1; j < 4; j++){
					        		if(data.footer_list.news_lists[j]){
					        			footerList.newsList.push(data.footer_list.news_lists[j]);
					        		}
					        }
					        var inFooterHtml = template('inFooterScript',footerList);
					        document.getElementById('inFooterHtml').innerHTML = inFooterHtml;
					      
						} 
					}
				});
			};
		</script>

	</body>

</html>